//碳交易统计
<template>
  <a-layout>
    <a-layout-content>
      <!-- 企业当前碳资产总览 -->
      <a-card title="企业当前碳资产总览" style="margin-bottom: 10px">
        <a-row :gutter="16">
          <a-col span="4">
            <p>碳配额</p>
            <p>数量: {{ carbonAssets.carbonQuota.count }}</p>
            <p>总值: {{ carbonAssets.carbonQuota.value }}</p>
          </a-col>
          <a-col span="4">
            <p>碳信用</p>
            <p>数量: {{ carbonAssets.carbonCredit.count }}</p>
            <p>总值: {{ carbonAssets.carbonCredit.value }}</p>
          </a-col>
          <a-col span="4">
            <p>绿电</p>
            <p>数量: {{ carbonAssets.greenElectricity.count }}</p>
            <p>总值: {{ carbonAssets.greenElectricity.value }}</p>
          </a-col>
          <a-col span="4">
            <p>绿碳</p>
            <p>数量: {{ carbonAssets.greenCarbon.count }}</p>
            <p>总值: {{ carbonAssets.greenCarbon.value }}</p>
          </a-col>
          <a-col span="4">
            <p>碳汇项目</p>
            <p>数量: {{ carbonAssets.carbonSink.count }}</p>
            <p>总值: {{ carbonAssets.carbonSink.value }}</p>
          </a-col>
          <a-col span="4">
            <p>碳金融衍生品</p>
            <p>数量: {{ carbonAssets.carbonDerivatives.count }}</p>
            <p>总值: {{ carbonAssets.carbonDerivatives.value }}</p>
          </a-col>
        </a-row>
        <p>碳资产总值：{{ totalValue }}</p>
      </a-card>

      <!-- 日期选择控件 -->
      <a-range-picker v-model="dateRange" style="margin-bottom: 20px" />

      <!-- 碳资产交易部分 -->
      <template v-for="(asset, index) in assets" :key="index">
        <a-card :title="asset.title" style="margin-bottom: 20px">
          <div :id="'chart-' + index" class="chart"></div>
          <a-table :columns="columns" :data-source="asset.data">
            <template #bodyCell="{ record }">
              <span>{{ record.date }}</span>
              <span>{{ record.quantity }}</span>
              <span>{{ record.unitPrice }}</span>
              <span>{{ record.totalPrice }}</span>
              <span>{{ record.transactionType }}</span>
            </template>
          </a-table>
        </a-card>
      </template>
    </a-layout-content>
  </a-layout>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";

const carbonAssets = {
  carbonQuota: { count: "100", value: "10000" },
  carbonCredit: { count: "50", value: "5000" },
  greenElectricity: { count: "200", value: "20000" },
  greenCarbon: { count: "30", value: "3000" },
  carbonSink: { count: "40", value: "4000" },
  carbonDerivatives: { count: "25", value: "2500" },
};

const totalValue = "xxx"; // 根据实际数据计算总值
const dateRange = ref([]);
const assets = ref([
  {
    title: "碳配额",
    data: [
      {
        date: "2024-01-01",
        quantity: "10",
        unitPrice: "100",
        totalPrice: "1000",
        transactionType: "买入",
      },
      {
        date: "2024-01-02",
        quantity: "5",
        unitPrice: "200",
        totalPrice: "1000",
        transactionType: "卖出",
      },
    ],
    chartData: {
      xAxis: ["2024-01-01", "2024-01-02"],
      series: [10, 5],
    },
  },
  {
    title: "碳信用",
    data: [
      {
        date: "2024-01-01",
        quantity: "15",
        unitPrice: "150",
        totalPrice: "2250",
        transactionType: "买入",
      },
      {
        date: "2024-01-02",
        quantity: "10",
        unitPrice: "250",
        totalPrice: "2500",
        transactionType: "卖出",
      },
    ],
    chartData: {
      xAxis: ["2024-01-01", "2024-01-02"],
      series: [15, 10],
    },
  },
  {
    title: "绿电",
    data: [
      {
        date: "2024-01-01",
        quantity: "20",
        unitPrice: "80",
        totalPrice: "1600",
        transactionType: "买入",
      },
      {
        date: "2024-01-02",
        quantity: "10",
        unitPrice: "120",
        totalPrice: "1200",
        transactionType: "卖出",
      },
    ],
    chartData: {
      xAxis: ["2024-01-01", "2024-01-02"],
      series: [20, 10],
    },
  },
  {
    title: "绿碳",
    data: [
      {
        date: "2024-01-01",
        quantity: "12",
        unitPrice: "90",
        totalPrice: "1080",
        transactionType: "买入",
      },
      {
        date: "2024-01-02",
        quantity: "8",
        unitPrice: "110",
        totalPrice: "880",
        transactionType: "卖出",
      },
    ],
    chartData: {
      xAxis: ["2024-01-01", "2024-01-02"],
      series: [12, 8],
    },
  },
  {
    title: "碳汇项目",
    data: [
      {
        date: "2024-01-01",
        quantity: "5",
        unitPrice: "150",
        totalPrice: "750",
        transactionType: "买入",
      },
      {
        date: "2024-01-02",
        quantity: "3",
        unitPrice: "200",
        totalPrice: "600",
        transactionType: "卖出",
      },
    ],
    chartData: {
      xAxis: ["2024-01-01", "2024-01-02"],
      series: [5, 3],
    },
  },
  {
    title: "碳金融衍生品",
    data: [
      {
        date: "2024-01-01",
        quantity: "7",
        unitPrice: "250",
        totalPrice: "1750",
        transactionType: "买入",
      },
      {
        date: "2024-01-02",
        quantity: "4",
        unitPrice: "300",
        totalPrice: "1200",
        transactionType: "卖出",
      },
    ],
    chartData: {
      xAxis: ["2024-01-01", "2024-01-02"],
      series: [7, 4],
    },
  },
]);

const columns = [
  { title: "日期", dataIndex: "date" },
  { title: "数量", dataIndex: "quantity" },
  { title: "单价", dataIndex: "unitPrice" },
  { title: "总价", dataIndex: "totalPrice" },
  { title: "交易类型", dataIndex: "transactionType" },
];

onMounted(() => {
  assets.value.forEach((asset, index) => {
    const chartDom = document.getElementById(`chart-${index}`);
    const myChart = echarts.init(chartDom);

    const option = {
      grid: {
        height: "50%",
        width: "90%",
        left: "5%",
      },
      title: {
        text: `${asset.title} 历史交易`,
      },
      tooltip: {
        trigger: "axis",
      },
      xAxis: {
        type: "category",
        data: asset.chartData.xAxis,
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "数量",
          type: "line",
          data: asset.chartData.series,
        },
      ],
    };

    myChart.setOption(option);
  });
});
</script>

<style scoped>
.chart {
  height: 200px;
  background-color: #f0f2f5;
  margin-bottom: 10px;
}
</style>
